<template>
  <FormView not-form form-width="100%">
    <div style="padding: 10px">
      <ElButton type="primary" @click="eShow = !eShow">ElementDialog</ElButton>
      <ElButton type="primary" @click="eShow1 = !eShow1">1</ElButton>
      <ElButton type="primary" @click="eShow2 = !eShow2">2</ElButton>
      <ElButton type="primary" @click="eShow3 = !eShow3">3</ElButton>
      <ElButton type="primary" @click="eShow4 = !eShow4">4</ElButton>

      <!--<ElButton v-for="item in list" :key="`${item.title}btn`" type="primary" @click="item.show = true">
        {{ item.title }}
      </ElButton>-->

      <ElementDialog :visible.sync="eShow" show-full-screen width="50vw" height="50vh" title="ElementDialog">
        <template #default>
          <PageableTable descs="createTime">
            <TableColumn prop="statusCn" label="状态" align="center" width="100" />
            <TableColumn prop="politicalCn" label="政治面貌" align="center" width="140" />
            <TableColumn prop="ouName" label="被反映人单位" />
            <TableColumn prop="problemCategoryCn" label="问题类别" width="150">
              <template #header>问题类别</template>
              <template #default="{ row }">
                {{ row.problemCategoryCn }}
              </template>
            </TableColumn>
          </PageableTable>
        </template>
        <template #footer>
          <ElButton size="small" type="primary" @click="eShow = !eShow">确定</ElButton>
          <ElButton size="small" plain @click="eShow = !eShow">取消</ElButton>
        </template>
      </ElementDialog>

      <ElementDialog :visible.sync="eShow1" :center="false" width="500px" height="200px" title="测评链接">
        <template #default>
          <p>测评链接地址</p>
          <p>将链接地址发给测评人员</p>
          <div><ElInput /></div>
          <div>
            <ElButton>复制连接</ElButton>
            <ElButton>直接打开</ElButton>
          </div>
        </template>
      </ElementDialog>

      <ElementDialog :visible.sync="eShow2" :center="false" width="800px" height="400px" title="临时账号">
        <template #default>
          <p>临时账号</p>
          <p>将临时账号发给考核工作组成员</p>
          <PageableTable auto-height>
            <TableColumn label="账号" />
            <TableColumn label="密码" />
          </PageableTable>
          <div>
            <ElButton>复制账号</ElButton>
            <ElButton>导出账号</ElButton>
          </div>
        </template>
      </ElementDialog>

      <ElementDialog :visible.sync="eShow3" :center="false" width="800px" height="400px" title="考核结果">
        <template #default>
          <p>2021年度企业纪委书记考核结果</p>
          <p>被考评人：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
          <PageableTable auto-height>
            <TableColumn label="分类" />
            <TableColumn label="得分" />
          </PageableTable>
          <div>综合得分：90 排名：9 结果等次：优秀</div>
        </template>
      </ElementDialog>

      <ElementDialog :visible.sync="eShow4" :center="false" width="500px" title="考核结果反馈">
        <template #default>
          <FormHolder label-width="80px">
            <FormInput block label="考核项目" />
            <FormTextarea label="反馈对象" />
            <FormInputNumber block label="数量" />
          </FormHolder>
        </template>
        <template #footer>
          <ElButton size="small" plain @click="eShow4 = !eShow4">取消</ElButton>
          <ElButton size="small" type="primary">发送</ElButton>
        </template>
      </ElementDialog>

      <!--<ElDialog
        v-for="item in list"
        :key="item.title"
        v-dialog-drag
        :close-on-click-modal="item.customClass === 'el-dialog-none-header'"
        :custom-class="item.customClass"
        :modal="item.modal"
        :title="item.title"
        :visible.sync="item.show"
        append-to-body
        center
        width="500px">
        <div style="height: 300px;">
          {{ item.title }}
        </div>
      </ElDialog>-->
    </div>
  </FormView>
</template>

<script>
  export default {
    name: 'DialogDemo',
    data() {
      /* const list = [
        {
          title: '默认风格',
          modal: true,
          customClass: '',
          show: false
        },
        {
          title: '蓝色风格',
          modal: true,
          customClass: 'el-dialog-blue',
          show: false
        },
        {
          title: '边框风格',
          modal: true,
          customClass: 'el-dialog-border',
          show: false
        },
        {
          title: '隐藏头部',
          modal: true,
          customClass: 'el-dialog-none-header',
          show: false
        },
        {
          title: '默认风格-无遮罩',
          modal: false,
          customClass: '',
          show: false
        },
        {
          title: '蓝色风格-无遮罩',
          modal: false,
          customClass: 'el-dialog-blue',
          show: false
        },
        {
          title: '边框风格-无遮罩',
          modal: false,
          customClass: 'el-dialog-border',
          show: false
        },
        {
          title: '隐藏头部-无遮罩',
          modal: false,
          customClass: 'el-dialog-none-header',
          show: false
        }
      ] */
      return {
        // list,
        eShow: false,
        eShow1: false,
        eShow2: false,
        eShow3: false,
        eShow4: false
      }
    }
  }
</script>
